<template>
<span>
  <el-dropdown trigger="click">
    <slot>
      <el-link :underline="false"><span class="mr-2">{{value | perms}}</span><i class="el-icon-caret-bottom"></i></el-link>
    </slot>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item :class="[selectCls(item)]" v-for="(item, j) in groups" :key="j" @click.native="onUpdateUmask(item)">
        <span class="mx-3">{{item.label}}</span>
      </el-dropdown-item>
      <el-dropdown-item icon="el-icon-edit" @click.native="onEditPerm(value)"><span class="text-info">自定义权限</span></el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
  <doc-umask-opt-modal ref="docUmaskOptModal"></doc-umask-opt-modal>
</span>
</template>

<script lang="ts">

import { Vue, Component, Prop, Emit, Ref } from 'vue-property-decorator'
import { items } from '@/config/acl'
import DocUmaskOptModal from '@/views/pages/docs/components/doc-umask-opt-modal/index.vue'
import { AppModule } from '@/store'

@Component({
  components: { DocUmaskOptModal }
})
export default class DocAuthorizeChooser extends Vue {
  @AppModule.State permGroups!: any[]

  @Ref() docUmaskOptModal!: any

  @Prop() value!: number

  @Prop(Boolean) team!: boolean

  @Emit() input (value: number) {}

  get groups () {
    if (this.team) {
      return this.permGroups.filter(v => v.value !== 1)
    }
    return this.permGroups
  }

  selectCls (item: any) {
    return item?.value === this.value ? 'selected' : ''
  }

  onUpdateUmask (item: any) {
    setTimeout(() => {
      this.input(item.value)
    }, 500)
  }

  onEditPerm (value: any) {
    this.docUmaskOptModal.open(value, this.team).then((data: any) => {
      this.input(data)
    }).catch(() => {
      // ignore
    })
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

</style>
